import ChartBase from './chart-base'
import { deepClone, mergeObject } from '@/utils'

export default class MapBase extends ChartBase {
  constructor() {
    super()
  }

  //基础描述
  _info = {
    name: '基础地图',
    type: 'map-base',
    group: 'map',// 图表分类
    component: 'Map',
    icon: 'map-base'// 图表展示ICON
  }

  // 总 配置项
  _defaultOption = {
    tooltip: {
      show: true,
      trigger: 'item',
    },

    visualMap: {
      show: true,
      min: 0,
      max: 60,
      left: 'left',
      top: 'bottom',
      text: ['高', '低'], // 文本，默认为数值文本
      calculable: true,
      seriesIndex: [1],
      inRange: {
        color: ['#00467F', '#A5CC82'] // 蓝绿
      }
    },

    geo: { // 这个是重点配置区
      map: 'china',
      aspectScale: 0.75, //长宽比
      zoom: 1.1,
      roam: false,
      itemStyle: {
        areaColor: '#274d68',
        shadowColor: '#3A73C0',
        shadowOffsetX: 2,
        shadowOffsetY: 11,
        emphasis: {
          areaColor: '#2AB8FF',
          borderWidth: 0,
          color: 'green',
          label: {
            show: false
          }
        }

      },
      regions: [{
        name: '南海诸岛',
        opacity: 0,
        itemStyle: {
          areaColor: 'rgba(0, 10, 52, 1)',
          borderColor: 'rgba(0, 10, 52, 1)',
          opacity: 0,
          label: {
            show: false,
            color: '#009cc9'
          }
        }
      }]
    },
    series: [
      {
        name: '散点',
        type: 'scatter',
        coordinateSystem: 'geo'
      }
    ]
  }

  // 系列
  _defaultSeries = {}

  _defaultMapSeries = {
    type: 'map',
    tooltip: {
      show: false
    },
    zoom: 1.1,
    map: 'china',
    roam: false,
    selectedMode: false, //取消点击后出现黄色高亮
    label: {
      show: true,
      textStyle: {
        color: '#000000'
      },
      emphasis: {
        textStyle: {
          color: '#000000'

        }
      },
      fontSize: 12
    },

    itemStyle: {
      borderColor: '#93EBF8',
      borderWidth: 1,
      areaColor: '#274d68',
      emphasis: {
        areaColor: '#2EE5CE',
        borderWidth: 0.1
      }
    },
    data: []
  }

  // 数据结构描述
  _dataPoolConfig = [
    {
      label: '地区名称',
      key: 'areaName',
      type: ['string'],
      limit: 1,
      description: '字段类型为「 字符类型 」',
      width: '100%'
    },
    {
      label: '详细信息',
      key: 'nums',
      type: ['number'],
      limit: 1,
      description: '字段类型为「 数字类型 」'
    }
  ]

  // 样式配置描述信息
  _styleOptionConfig = [
    {
      label: '地图配置',
      bindKeys: '_group.map',
      controlType: 'group',
      controlValue: '',
      controlProps: {},
      controlConfigs: {}
    },
    {
      label: '区域展示',
      bindKeys: 'mapSeries.label.show',
      controlType: 'switch',
      controlValue: false,
      controlProps: {},
      controlConfigs: {}
    },
    {
      label: '区域字体颜色',
      bindKeys: 'mapSeries.label.textStyle.color',
      controlType: 'color-picker',
      controlValue: '#000000',
      controlProps: {},
      controlConfigs: {}
    },
    {
      label: '地图颜色',
      bindKeys: 'mapSeries.itemStyle.areaColor',
      controlType: 'color-picker',
      controlValue: '#00467F',
      controlProps: {},
      controlConfigs: {}
    },
    {
      label: '分割线颜色',
      bindKeys: 'mapSeries.itemStyle.borderColor',
      controlType: 'color-picker',
      controlValue: '#93EBF8',
      controlProps: {},
      controlConfigs: {}
    },
    {
      label: '高亮颜色',
      bindKeys: 'mapSeries.itemStyle.emphasis.areaColor',
      controlType: 'color-picker',
      controlValue: '#EFCA41',
      controlProps: {},
      controlConfigs: {}
    },
    {
      label: '高亮字体颜色',
      bindKeys: 'mapSeries.label.emphasis.textStyle.color',
      controlType: 'color-picker',
      controlValue: '#000000',
      controlProps: {},
      controlConfigs: {}
    },
    {
      label: '阴影颜色',
      bindKeys: 'option.geo.itemStyle.shadowColor',
      controlType: 'color-picker',
      controlValue: '#BDD3EF',
      controlProps: {},
      controlConfigs: {}
    },
    {
      label: '区间值设置',
      bindKeys: '_group.lines',
      controlType: 'group',
      controlValue: '',
      controlProps: {},
      controlConfigs: {}
    },
    {
      label: '是否显示提示',
      bindKeys: 'option.visualMap.show',
      controlType: 'switch',
      controlValue: true,
      controlProps: {},
      controlConfigs: {}
    },
    {
      label: '区间最低值',
      bindKeys: 'config.value.min',
      controlType: 'input-number',
      controlValue: 0,
      controlProps: {},
      controlConfigs: {}
    },
    {
      label: '最低值背景色',
      bindKeys: 'config.value.minColor',
      controlType: 'color-picker',
      controlValue: '#00467F',
      controlProps: {},
      controlConfigs: {}
    },
    {
      label: '区间最高值',
      bindKeys: 'config.value.max',
      controlType: 'input-number',
      controlValue: 100,
      controlProps: {},
      controlConfigs: {}
    },
    {
      label: '最高值背景色',
      bindKeys: 'config.value.maxColor',
      controlType: 'color-picker',
      controlValue: '#A5CC82',
      controlProps: {},
      controlConfigs: {}
    },
    {
      label: '提示框配置',
      bindKeys: '_group.tooltipConfig',
      controlType: 'group',
      controlValue: '',
      controlProps: {},
      controlConfigs: {}
    },
    {
      label: '提示框展示',
      bindKeys: 'mapSeries.tooltip.show',
      controlType: 'switch',
      controlValue: false,
      controlProps: {},
      controlConfigs: {}
    },
    {
      label: '字体大小',
      bindKeys: 'mapSeries.tooltip.textStyle.fontSize',
      controlType: 'slider',
      controlValue: 14,
      controlProps: {
        min: 12,// 最小值
        max: 18,// 最大值
        step: 1// 步长
      },
      controlConfigs: {}
    },
    {
      label: '字体颜色',
      bindKeys: 'mapSeries.tooltip.textStyle.color',
      controlType: 'color-picker',
      controlValue: '#606266',
      controlProps: {},
      controlConfigs: {}
    }
  ]

  getOption({ dataList = [], dataTotal = 0, dataPoolField, styleOptionConfig = [], themeColor = [], themeStyle = {} }) {
    let { option, mapSeries, config } = this._transformStyleOptionConfig(styleOptionConfig)
    let defaultOption = deepClone(this._defaultOption)
    let mapDefaultSeries = deepClone(this._defaultMapSeries)

    // 再合并自定义配置项
    if (defaultOption && option) defaultOption = mergeObject(defaultOption, option)
    if (mapDefaultSeries && mapSeries) mapDefaultSeries = mergeObject(mapDefaultSeries, mapSeries)

    if (defaultOption && config) {
      let mapOption = config.value
      defaultOption.visualMap.min = mapOption.min || 0
      defaultOption.visualMap.max = mapOption.max || 100
      defaultOption.visualMap.inRange.color = [mapOption.minColor || '#00467F', mapOption.maxColor || '#A5CC82']
    }

    let areaName, nums 
    //数据处理  
    if (dataPoolField.areaName.length && dataPoolField.nums.length) {
      areaName = dataPoolField.areaName[0].fieldName
      nums = dataPoolField.nums[0].fieldName
      mapDefaultSeries.data = dataList.reduce((r, c) => {
        r.push({
          name: c[areaName],
          value: c[nums]
        })
        return r
      }, [])
    }

    defaultOption.series.push({
      ...mapDefaultSeries
    })

    defaultOption.tooltip.formatter = (item) => {
      if (item.value || item.value === 0) {
        return `${item.name}<br/>
                    ${nums ? (nums + ': ' + (item.value ? item.value : 0)) : ''}`
      }
    }

    return {
      mapOption: defaultOption,
    }
  }

  getClickData(event) {
    const { name, seriesType, value } = event
    if(seriesType === 'map') {
      return {
        label: name,
        value: name
      }
    }
  }
}
